<template>
  <div class="Declare">
    <PublicHead></PublicHead>
    <div class="declareBox">
      <div class="title">
        <div>示范基地申报</div>
        <div>/&ensp;SHIFANJIDISHENBAO</div>
      </div>
      <div class="title2">
        【申请资料】
      </div>
      <!-- 申请资料 -->
      <div>
        <el-table :data="tableData" class="my-table" border style="width: 100%;">
          <el-table-column width="60px" align="center" label="序号" prop="id"
            :label-class-name="'table-header'"></el-table-column>
          <!-- 是否必填 -->
          <el-table-column width="100px" align="center" label="是否必填" :label-class-name="'table-header'">
            <template slot-scope="scope">
              <span v-if="scope.row.id !== '10'">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column width="300px" label="资料名称" prop="name" :label-class-name="'table-header'">
            <template slot-scope="scope">
              <span class="name">
                <!-- <span v-if="scope.row.id !== '9'" style="color: red;">*</span> -->
                {{ scope.row.name | flitt() }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="附件" width="150" :label-class-name="'table-header'">
            <template slot-scope="scope">
              <el-icon class="iconDownload" name="download"></el-icon>
              <span class="text" @click="download(scope.row)">{{ scope.row.moban }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="资料上传" :label-class-name="'table-header'">
            <template slot-scope="{row}">
              <el-upload class="upload-demo" :action="https + 'zxqyfw/pub/fileUploadRecord/upload'" :on-preview="handlePreview"
                :data="uploadfile(row.name, '资料上传')" :headers="{ Authorization: token }"
                :on-success="(response, file, fileList) => { return handleSuccess(response, file, fileList, row.id, row.name, '资料上传') }"
                :on-remove="(response, file, fileList) => { return beforeRemove(response, file, fileList, row.id, row.name, '资料上传') }"
                :before-remove="handbefore" multiple :limit="3" :on-exceed="handleExceed" :accept="'.pdf'"
                :file-list="fileList">
                <el-icon class="iconDownload1" name="upload2"></el-icon>
                <span class="text1">上传文件</span>
                <span v-if="false" class="text1">{{ scope.row.file }}</span>
              </el-upload>
            </template>
          </el-table-column>
          <el-table-column align="center" label="辅助证明文件上传" :label-class-name="'table-header'">
            <template slot-scope="{row}">
              <el-upload class="upload-demo" :action="https + 'zxqyfw/pub/fileUploadRecord/upload'" :on-preview="handlePreview"
                :data="uploadfile(row.name, '辅助证明文件上传')" :headers="{ Authorization: token }"
                :on-success="(response, file, fileList) => { return handleSuccess(response, file, fileList, row.id, row.name, '辅助证明文件上传') }"
                :on-remove="(response, file, fileList) => { return beforeRemove(response, file, fileList, row.id, row.name, '辅助证明文件上传') }"
                :before-remove="handbefore" multiple :limit="3" :on-exceed="handleExceed" :accept="'.pdf'"
                :file-list="fileList">
                <el-icon class="iconDownload1" name="upload2"></el-icon>
                <span class="text1">上传文件</span>
                <span v-if="false" class="text1">{{ scope.row.file }}</span>
              </el-upload>
            </template>
          </el-table-column>

        </el-table>
      </div>

      <!-- 附件说明 -->
      <div class="title2">
        【附件说明】
      </div>
      <div class="fujian" @click="handlePreviewone()" >
        兰州市中小企业小型微型企业创业创新示范基地认定管理办法.pdf
      </div>
      <!-- <div class="fujian">
        兰州市工业和信息化委员会关于做好2019年兰州市中小企业公共服务示范平台申报工作的通知.pdf
      </div> -->
      <!-- 相关联系人 -->
      <div class="title2">
        【相关联系科室】
      </div>
      <div class="lianxi">
        <div>兰州市中小企业公共服务平台</div>
        <div>双创科</div>
        <div>4535093</div>
      </div>
      <div class="tableFoot">
        <button @click="submit(4, '保存成功')">保存</button>
        <button @click="submit(0, '提交成功')">提交</button>
        <button @click="quxiao">取消</button>
      </div>
    </div>
    <PublicFoot></PublicFoot>
  </div>
</template>
  
<script>
import PublicHead from '../components/PublicHead.vue'
import PublicFoot from '../components/PublicFoot.vue'
import { http } from '@/until/http'
import { shifan_add1, download, moban_list, upload_file } from '../api/api'
export default {
  data() {
    return {
      https: http,
      uploadData: {

      },
      resData: {},
      fileList: [],
      response: '',
      token: '',
      upload: {
        "userId": this.$store.state.userId,
        "level": localStorage.getItem('area'),
        "applicationType": localStorage.getItem('type'),
        "dataType": 0,
        "file1": { "1,兰州市小型微型企业创业创新基地认定申请表_资料上传": [] },
        "file2": { "1,兰州市小型微型企业创业创新基地认定申请表_辅助证明文件上传": [] },
        "file3": { "2,申请报告_资料上传": [] },
        "file4": { "2,申请报告_辅助证明文件上传": [] },
        "file5": { "3,运营主体的法人证书和营业执照副本(复印件)_资料上传": [] },
        "file6": { "3,运营主体的法人证书和营业执照副本(复印件)_辅助证明文件上传": [] },
        "file7": { "4,上一年度与本基地相关的专项审计报告_资料上传": [] },
        "file8": { "4,上一年度与本基地相关的专项审计报告_辅助证明文件上传": [] },
        "file9": { "5,土地、房屋的不动产权证书(或租赁合同)复印件_资料上传": [] },
        "file10": { "5,土地、房屋的不动产权证书(或租赁合同)复印件_辅助证明文件上传": [] },
        "file11": { "6,创业创新基地主要从业人员情况表_资料上传": [] },
        "file12": { "6,创业创新基地主要从业人员情况表_辅助证明文件上传": [] },
        "file13": { "7,基地主要管理人员、服务人员和创业辅导师名单及相应的资质证明材料_资料上传": [] },
        "file14": { "7,基地主要管理人员、服务人员和创业辅导师名单及相应的资质证明材料_辅助证明文件上传": [] },
        "file15": { "8,基地典型服务案例(不超过2000字、可附照片)_资料上传": [] },
        "file16": { "8,基地典型服务案例(不超过2000字、可附照片)_辅助证明文件上传": [] },
        "file17": { "9,申报主体要确保申报材料真实性、完整性、填报申报材料真实性声明(加盖公章)_资料上传": [] },
        "file18": { "9,申报主体要确保申报材料真实性、完整性、填报申报材料真实性声明(加盖公章)_辅助证明文件上传": [] },
        "file19": { "10,能够证明符合申报条件的其他材料_资料上传": [] },
        "file20": { "10,能够证明符合申报条件的其他材料_辅助证明文件上传": [] },
        pprovalStatus: '',
      },
      tableData: [
      { id: '1', name: "1,兰州市小型微型企业创业创新基地认定申请表", status: "待审核", file: '上传文件', moban: '下载附件', zhengming: '上传辅助证明文件', fileId: '1663587603498246146', type: 'doc' },
        { id: '2', name: "2,申请报告", status: "待审核", file: '上传文件', moban: '下载附件', zhengming: '上传辅助证明文件', fileId: '1663587636457086977', type: 'doc' },
        { id: '3', name: "3,运营主体的法人证书和营业执照副本(复印件)", status: "待审核", file: '上传文件', moban: '下载附件', zhengming: '上传辅助证明文件',  fileId: '1663587603498246146', type: 'doc'},
        { id: '4', name: "4,上一年度与本基地相关的专项审计报告", status: "待审核", file: '上传文件', moban: '下载附件', zhengming: '上传辅助证明文件',  fileId: '1663587603498246146', type: 'doc' },
        { id: '5', name: "5,土地、房屋的不动产权证书(或租赁合同)复印件", status: "待审核", file: '上传文件', moban: '下载附件', zhengming: '上传辅助证明文件', fileId: '1663587603498246146', type: 'doc' },
        { id: '6', name: "6,创业创新基地主要从业人员情况表", status: "待审核", file: '上传文件', moban: '下载附件', zhengming: '上传辅助证明文件', fileId: '1663587767751385090', type: 'xls' },
        { id: '7', name: "7,基地主要管理人员、服务人员和创业辅导师名单及相应的资质证明材料", status: "待审核", file: '上传文件', moban: '下载附件', zhengming: '上传辅助证明文件',  fileId: '1663587767751385090', type: 'xls' },
        { id: '8', name: "8,基地典型服务案例(不超过2000字、可附照片)", status: "待审核", file: '上传文件', moban: '下载附件', zhengming: '上传辅助证明文件', fileId: '1663588105048924161', type: 'xls' },
        { id: '9', name: "9,申报主体要确保申报材料真实性、完整性、填报申报材料真实性声明(加盖公章)", status: "待审核", file: '上传文件', moban: '下载附件', zhengming: '上传辅助证明文件', fileId: '1663588105048924161', type: 'xls' },
        { id: '10', name: "10,能够证明符合申报条件的其他材料", status: "待审核", file: '上传文件', moban: '下载附件', zhengming: '上传辅助证明文件', fileId: '1663587603498246146', type: 'doc' },
      ],

      data: {
        userId: '',
        applicationType: '0',
        level: '0',
        dataType: '0'
      }
    };
  },
  methods: {
    uploadfile(rowname, type) {
      return { userId: this.$store.state.userId, name: rowname, type: type }
    },
    //提交表单
    submit(state, name) {
      this.upload.pprovalStatus = state
      if (state == '4') {
        shifan_add1(this.upload).then((res) => {
          if (res.data.state == '20000') {
            this.$message({
              message: name,
              type: 'success',
            });
            this.$router.push('/homepage');
          } else {
            this.$message.error(res.data.message);
          }
        })
      } else if (state == '0') {
        console.log(this.upload);
        let wj1 = Object.values(this.upload.file1)
        let wj2 = Object.values(this.upload.file3)
        let wj3 = Object.values(this.upload.file5)
        let wj4 = Object.values(this.upload.file7)
        let wj5 = Object.values(this.upload.file9)
        let wj6 = Object.values(this.upload.file11)
        let wj7 = Object.values(this.upload.file13)
        let wj8 = Object.values(this.upload.file15)
        let wj9 = Object.values(this.upload.file17)
        if (wj1[0].length <= 0 || wj2[0].length <= 0 || wj3[0].length <= 0 || wj4[0].length <= 0 || wj5[0].length <= 0 || wj6[0].length <= 0 || wj7[0].length <= 0 || wj8[0].length <= 0 || wj8[0].length <= 0 ||  wj9[0].length <= 0) {
          this.$message.error('您有必填项的文件未上传')
        } else {
          shifan_add1(this.upload).then((res) => {
            if (res.data.state == '20000') {
              this.$message({
                message: name,
                type: 'success',
              });
              this.$router.push('/homepage');
            } else {
              this.$message.error(res.data.message);
            }
          })
        }
      }

    },
    download(row) {
      var fileData = {
  1: {
    url: './file/jidi/兰州市小型微型企业创业创新基地认定申请表.doc',
    fileName: row.name
  },
  2: {
    url: './file/jidi/申请报告.docx',
    fileName: row.name
  },
  6: {
    url: './file/jidi/创业创新基地主要从业人员情况表.xls',
    fileName: row.name
  },
  9: {
    url: './file/jidi/真实性的声明.xls',
    fileName: row.name
  },
};

if (fileData.hasOwnProperty(row.id)) {
  var data = fileData[row.id];
  let link = document.createElement("a");
  link.href = data.url;
  link.setAttribute("download", data.fileName);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}else{
  this.$message({
          message: '暂无附件',
          type: 'warning'
        });
}
    },
    //取消申报
    quxiao() {
      this.$router.go(-1)
    },
    //点击删除按钮
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //预览文件
    handlePreview(file) {
      upload_file({ fileId: file.response.data }).then((res) => {
        console.log(res);
        let url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/pdf' }))

        window.open(url)
      })

    },
     //预览文件
     handlePreviewone() {
      var url ='./file/jidi/兰州市中小企业小型微型企业创业创新示范基地认定管理办法.pdf'
        window.open(url)

    },
    //超出限制
    handleExceed() {
      this.$message.warning('每一项只能上传3个文件');
    },
    //点击移除的对话框
    beforeRemove(response, file, fileList, id, name, type) {
      if (response && response.status == "success") {
        console.log(response, file, fileList, id, name, type);
        if (type == '资料上传') {
          name = name + '_资料上传'
          for (var key in this.upload) {
            if (key.slice(4, 6) == (id * 2) - 1) {
              console.log(this.upload[key][name]);
              var index = this.upload[key][name].indexOf(response.response.data)
              this.upload[key][name].splice(index, 1)
              console.log(this.upload[key][name]);
            }
          }
        } else if (type == '辅助证明文件上传') {
          name = name + '_辅助证明文件上传'
          for (var keys in this.upload) {
            if (keys.slice(4, 6) == (id * 2)) {
              console.log(this.upload[keys][name]);
              var index = this.upload[keys][name].indexOf(response.response.data)
              this.upload[keys][name].splice(index, 1)
              console.log(this.upload[keys][name]);
            }
          }
        }
      }
    },
    handbefore(file) {
      return this.$confirm(`确定移除 ${file.name}?`)
    },
    //上传成功的回调
    handleSuccess(response, file, fileList, id, name, type) {
      if (response && response.state == '20000') {
        console.log(response, file, fileList, id, name, type);
        if (type == '资料上传') {
          name = name + '_资料上传'
          for (var key in this.upload) {
            if (key.slice(4, 6) == (id * 2) - 1) {
              console.log(this.upload[key]);
              this.upload[key][name].push(response.data)
              console.log(this.upload);
            }
          }
        } else if (type == '辅助证明文件上传') {
          name = name + '_辅助证明文件上传'
          for (var keys in this.upload) {
            if (keys.slice(4, 6) == (id * 2)) {
              //  console.log(this.upload[keys]);
              this.upload[keys][name].push(response.data)
              // console.log( this.upload[key][name].push(response.data));
              console.log(this.upload);
            }
          }
        }
      }

    }
  },
  mounted() {
    this.token = localStorage.getItem('token')
    this.uploadData.userId = this.$store.state.userId

    moban_list({ applicationType: 0 }).then((res) => {
      console.log(res);
    })
  },
  filters: {
    flitt(name) {
      console.log(name);
      var name1 = name.split(',')
      var name2 = name1.pop()
      console.log(name2);
      return name2.toString()
    }
  },
  components: {
    PublicHead,
    PublicFoot,
  }
}
</script>
  
<style scoped lang="scss"> ::v-deep .el-upload-list__item.is-success.focusing .el-icon-close-tip {
   display: none !important;
 }

 .declareBox {
   width: 1220px;
   height: 100%;
   background: #FFFFFF;
   margin: 30px auto;
   box-sizing: border-box;
   padding: 10px 50px;

   .title {
     display: flex;

     div:nth-of-type(1) {
       width: 120px;
       height: 50px;
       font-size: 18px;
       font-family: Microsoft YaHei;
       font-weight: bold;
       color: #262626;
       line-height: 50px;
       margin-bottom: 20px;
       border-bottom: 4px #1285D7 solid;

     }

     div:nth-of-type(2) {
       height: 50px;
       font-size: 15px;
       font-family: Arial;
       font-weight: 400;
       color: #DCDCDC;
       line-height: 50px;
       margin-right: 5px;

       border-bottom: 4px #1285D7 solid;

     }

     div:nth-of-type(3) {
       width: 189px;
       height: 50px;
       font-size: 15px;
       font-family: Arial;
       font-weight: 400;
       color: #DCDCDC;
       line-height: 50px;

       border-bottom: 4px #1285D7 solid;

     }

   }

   .title2 {
     width: 150px;
     height: 40px;
     font-size: 18px;
     font-family: Microsoft YaHei;
     font-weight: bold;
     color: #1285D7;
   }
 }

 .fujian {
   width: 1136px;
   height: 55px;
   background: #EBF5FC;
   font-size: 16px;
   font-family: Microsoft YaHei;
   font-weight: bold;
   color: #1285D7;
   line-height: 55px;
   margin: 10px 0px;
   padding-left: 20px;
   cursor: pointer;
 }

 .lianxi {
   display: flex;
   margin-bottom: 50px;

   div {
     width: 206px;
     height: 55px;
     background: #FAFAFA;
     border: 2px solid #EEEEEE;
     line-height: 55px;
     text-align: center;
   }

   div:nth-of-type(1) {
     width: 30%;
   }
 }

 .tableFoot {
   width: 100%;
   display: flex;
   justify-content: center;

   button {
     margin: 0px 10px;

     &:hover {
       cursor: pointer;
     }
   }

   button:nth-of-type(1) {
     width: 98px;
     height: 40px;
     background: #F39200;
     border: 0;
     border-radius: 3px 3px 3px 3px;
     color: white;
   }

   button:nth-of-type(2) {
     width: 98px;
     height: 40px;
     background: #2797E8;
     border-radius: 3px 3px 3px 3px;
     border: 0;

     color: white;
   }

   button:nth-of-type(3) {
     width: 98px;
     height: 40px;
     background: #FFFFFF;
     border-radius: 3px 3px 3px 3px;
     color: white;
     border: 0;
   }
 }

 .name {
   width: 208px;
   height: 45px;
   font-size: 16px;
   font-family: Microsoft YaHei;
   font-weight: bold;
   color: #FD8544;
 }

 .text {
   cursor: pointer;
   color: #1285D7;
 }

 .iconDownload {
   height: 14px;
   font-size: 14px;
   font-family: Microsoft YaHei;
   font-weight: bold;
   color: #1285D7;
 }

 .el-table__header {
   background-color: #1285D7 !important;
   color: white;
 }

 ::v-deep .el-table__header th.is-leaf,
 ::v-deep .el-table__header th.gutter {
   background-color: #1285D7 !important;
   color: white;
   font-size: 16px;
 }

 .status {
   width: 48px;
   height: 16px;
   font-size: 16px;
   font-family: Microsoft YaHei;
   font-weight: bold;
   color: #D62502;
 }

 .el-button--primary {
   background-color: #fd8544;
   border-color: #fd8544;
 }
</style>